<template>
    <el-card class="detail-wrapper">
        <div slot="header">
            <slot name="header">
                <div class="header">
                    <template v-if="!noback">
                        <i @click="returnList" class="el-icon-arrow-left"></i>
                        <div class="separater">|</div>
                    </template>
                    <div class="title">{{ title }}</div>
                </div>
            </slot>
        </div>
        <div class="content">
            <slot></slot>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "CommonDetail",
    props: ['title', 'noback'],
    data() {
        return {

        }
    },
    methods: {
        returnList() {
            this.$emit("returnList")
        }
    }
}
</script>

<style lang="scss" scoped>
.detail-wrapper {
    border: none;
    box-shadow: none;
    font-size: 12px;
    padding: 20px 10px 10px 10px;

    &::v-deep .el-card__header {
        margin: 0 20px;
        padding: 0 0 18px 0;

        .header {
            display: flex;
            align-items: center;

            i {
                color: #FF9B40;
                padding-top: 3px;
                font-size: 19px;
                cursor: pointer;
            }

            .separater {
                color: #f5f5f5;
                ;
                margin: 0 20px;
                font-size: 24px;
            }

            .title {
                font-weight: 800;
                font-size: 14px;
                padding-top: 2px;
            }
        }

        .content {
            margin: 0 20px;
        }

    }




}
</style>